前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

• 【Day 01】淺入淺出 Rails with Vue - Before We Begin
• 【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1
• 【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2
• 【Day 04】淺入淺出 Rails with Vue - Vue 的基本概念 - 3
• 【Day 05】淺入淺出 Rails with Vue - Vue 的基本概念 - 4
• 【Day 06】淺入淺出 Rails with Vue - Vue 的基本概念 - 5
• 【Day 07】淺入淺出 Rails with Vue - Vue 的基本概念 - 6
• 【Day 08】淺入淺出 Rails with Vue - Vue 的基本概念 - 7
• 【Day 09】淺入淺出 Rails with Vue - Vue 的基本概念 - 8
• 【Day 10】淺入淺出 Rails with Vue - Vue 的基本概念 - 9

Conditional Rendering

v-if

v-if 指令可以用來判斷是否要顯示某個元素，如果判斷為 true，則會顯示該元素，反之則不會顯示。

<h1 v-if="awesome">Vue is awesome!</h1>

v-else 指令可以用來判斷 v-if 的結果，如果 v-if 為 false，則會顯示 v-else 的內容。

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ?</h1>

v-if 需要 attached 到一個元素上，如果要顯示多個元素，可以使用 template 來包裝。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else

v-else 必須跟在 v-if 或 v-else-if 的後面，否則會出現錯誤。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if

v-else-if 可以用來判斷多個條件，如果前面的條件都不符合，則會執行 v-else-if 的內容，並且可以串接多個 v-else-if。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

與 v-else 一樣，v-else-if 必須跟在 v-if 或 v-else-if 的後面，否則會出現錯誤。

Controlling Reusable Elements with key

Vue 會盡可能的高效的更新 DOM，通常會使用 v-if 來判斷是否要顯示某個元素，但是如果使用 v-if 來切換元素，會造成元素被移除，然後重新建立的效果，這樣會造成效能上的問題。
所以 Vue 提供了一個 key 的屬性，可以用來告訴 Vue 這個元素是可以被重複使用的，這樣 Vue 就不會移除元素，而是會將元素移動到正確的位置。
假如現在有一個功能允許使用者在多個 login type 之間切換

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

在上面的範例中，當使用者切換 login type 時，使用者輸入的內容不會被清空，因為兩個 template 都是相同的元素，例如 input 不會被替換，只有 placeholder 會被替換。
但是如果使用 key 的話，就等同於告訴 Vue 這兩個元素是不同的，所以當切換 login type 時，Vue 會將原本的元素移除，然後重新建立一個新的元素。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

可以注意到上面的 label element 依然被有效的 re-used，因為它們都是相同的元素，只有 input element 會被重新建立。

v-show

另外一個可以用來判斷是否要顯示元素的指令是 v-show，不同於 v-if，v-show 會將元素的 display 屬性設為 none，所以元素會被保留在 DOM 中，但是不會被顯示出來。

<h1 v-show="ok">Hello!</h1>

若 ok 為 false，則 h1 會被設為 display: none，但是仍然會被保留在 DOM 中，顯示如下：

<h1 style="display: none;">Hello!</h1>

特別注意 v-show 也不支援 <template> element，也就是說 v-show 只能用在單一的 element 上。

v-if vs v-show

1. v-if 是真正的「conditional rendering」，因為會連同 event listeners 和 child components 一起被刪除或建立，而 v-show 只是改變 element 的 display 屬性，所以 v-show 的效能會比較好。
2. v-if 是「lazy」的，假如在初始的時候 condition 是 false，則什麼都不會被渲染，直到 condition 變成 true，而 v-show 則是一開始就會被渲染，只是 display 屬性會被設為 none。
3. v-show 相對簡單，不論 condition 是否為 true，element 都會被渲染，只是 display 屬性會被設為 none，所以 v-show 會比較適合用在「頻繁切換」的情況。
4. v-if 有更高的切換成本，因為它需要「建立」和「銷毀」 element，而 v-show 只是改變 display 屬性，所以 v-show 會比較適合用在「頻繁切換」的情況。v-if 比較適合在「初始渲染」後不太需要改變的情況。

v-if with v-for

v-if 和 v-for 可以一起使用但不推薦，要注意的是 v-for 會比較優先

Reference

• https://v2.vuejs.org/v2/guide/conditional.html